<template>
	<view>
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 行车登记
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info">
							<u-form-item
							label="车牌号"
							prop="carNum"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.carNum"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="行车日期"
							prop="useTime"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.useTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="时间段"
							prop="timeSlot"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.timeSlot"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item label="驾驶人" prop="userName" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<!-- <u-form-item label="出发地" prop="cfPlace" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.cfPlace"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item> -->
							<u-form-item label="目的地" prop="destination" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.destination"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="事由" prop="thing">
								<u--textarea
								disabled
								disabledColor="#ffffff"
								v-model="info.thing"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 出车检查
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form class="from-card" labelPosition="left" labelWidth="100" :model="info">
							<u-form-item label="油量" prop="oilCondition" borderBottom>
								<u-radio-group
								v-model="info.oilCondition"
								iconPlacement="left"
								shape="square">
									<u-radio
									disabled
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in oils"
									:key="index"
									:label="item.name"
									:name="item.name">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="整洁度" prop="cleanliness" borderBottom>
								<u-radio-group
								v-model="info.cleanliness"
								iconPlacement="left"
								shape="square">
									<u-radio
									disabled
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in cleanliness"
									:key="index"
									:label="item.name"
									:name="item.name">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="车况是否正常" prop="carCondition" borderBottom>
								<u-radio-group
								v-model="info.carCondition"
								iconPlacement="left"
								shape="square">
									<u-radio
									disabled
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in whether"
									:key="index"
									:label="item.name"
									:name="item.name">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="车辆异常状况" prop="abnormalCondition" borderBottom>
								<u--textarea
								disabled
								v-model="info.abnormalCondition"
								placeholder="请输入">
								</u--textarea>
							</u-form-item>
							<u-form-item label="其他不适合行车情况" prop="otherCondition">
								<u--textarea
								disabled
								v-model="info.otherCondition"
								placeholder="请输入">
								</u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 流程
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<view v-for="(item,index) in flowTaskList">
							<view class="list_user">
								<view class="left">
									<u-avatar
										v-if="item.avatar"
										:src="item.avatar"
										customStyle="width:100%;height:100%;"
										shape="square"
										size="35">
									</u-avatar>
									<u-avatar
										v-else
										customStyle="width:100%;height:100%;"
										:text="item.userName.slice(1)"
										bgColor="#0087FC"
										shape="square"
										size="35"
										:fontSize="item.userName.length > 2?12:15">
									</u-avatar>
									<view class="list_left_icon">
										<icon class="icon-box-img" type="waiting" size="15" color="#DD8E59" v-if="item.status == '0'"></icon>
										<icon class="icon-box-img" type="success" size="15" v-if="item.status == '1'"></icon>
										<icon class="icon-box-img" type="warn" size="15" v-if="item.status == '2'"></icon>
									</view>
								</view>
								<view class="right">
									<view class="line1"><text>审批人</text><text v-if="item.status=='1'||item.status=='2'">{{item.updateTime}}</text></view>
									<view class="line2">
										<text>{{item.userName+(item.status == '2'?'(已拒绝)':'')}}</text>
									</view>
								</view>
							</view>
							<view class="list_user" v-if="item.status == '2'">
								<view class="left"></view>
								<view class="right">
									<!-- 拒绝理由 -->
									<view class="line3">
										<text>{{item.opinion}}</text>
									</view>
								</view>
							</view>
						
							<view class="list_line" v-if="index != flowTaskList.length-1"><view class="line"></view></view>
							<!-- <view class="list_line"><view class="lineDash"></view></view> -->
						</view>
						<view style="margin-top: 40rpx;" v-if="flowCsVoList && flowCsVoList.length > 0">
							<text>抄送人</text>
							<view class="per-list-csr" style="margin-top: 10rpx;">
								<view class="csr-item" v-for="(item,index) in flowCsVoList">
									<view class="pers-pic">
										<u-avatar
											v-if="item.avatar"
											:src="item.avatar"
											shape="square"
											size="35">
										</u-avatar>
										<u-avatar
											v-else
											:text="item.userName.slice(1)"
											bgColor="#0087FC"
											shape="square"
											size="35"
											:fontSize="item.userName.length > 2?12:15">
										</u-avatar>
										<view style="margin-top: 10rpx;">
											<text class="pers-name">{{item.userName}}</text>
										</view>
									</view>
									<view class="csr-icon" v-if="index != flowCsVoList.length-1">
										<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button" v-if="info.status == 0&&spType == '用户'">
			<view style="background-color: #9a9d9f;" class="submit-block" @click="submit()">
				撤 销
			</view>
		</view>
		<view class="submit-button" v-if="info.status == 0&&spType == '审批'">
			<view class="submit-block">
				<view class="submit-block_item" @click="gotoApprovePage('1')">同 意</view>
				<view class="submit-block_item" @click="gotoApprovePage('2')">拒 绝</view>
			</view>
		</view>
		
		<view class="qz">
			<span v-if="info.status == 1"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/49d884b6a24c4f9cb645b551a974dec3.png" /></span>
			<span v-if="info.status == 2"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/a2ef1372c79d42aeb3adec735fd6826e.png" /></span>
			<span v-if="info.status == 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/87530e13f0954b08b12f43b8998a6e14.png" /></span>
		</view>
		
	</view>
</template>

<script>
	import { getInfo, revoke } from '@/api/journal.js'
	export default {
		data() {
			return {
				spType:'用户',
				type:'',
				flowTaskList:[],
				flowCsVoList:[],
				info:{
					carId:'',
					carNum:'',
					useTime: '',
					userName:'',
					oilCondition:'',
					cleanliness:'',
					carCondition:'',
					abnormalCondition:'',
					otherCondition:'',
					status:''
				},
				oils:[
					{ name:'无需加油' },
					{ name:'需加油' },
				],
				cleanliness:[
					{ name:'整洁' },
					{ name:'不整洁' },
				],
				whether:[
					{ name:'是' },
					{ name:'否' },
				],
				czId:''
			}
		},
		onLoad(option) {
			this.getJournalInfo(option.id)
			this.spType = option.spType
			this.type = option.type
			this.czId = option.id
		},
		methods: {
			gotoApprovePage(statusType){
				if (statusType=="1") {
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=1&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=2&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}
			},
			async getJournalInfo(id){
				const { data } = await getInfo(id);
				if(data.code == 200){
					this.info = data.data
					this.flowTaskList = data.data.flowTaskList
					this.flowCsVoList = data.data.flowCsVoList
				}
			},
			submit(){
				uni.showModal({
				  content: '确定要撤销申请吗？',
				  showCancel: true,
				  confirmText: '确定',
				  cancelText: '取消',
				  success: res => {
				    if (res.confirm) {
						this.doRevoke(this.info.id)
				    }
				  }
				})
			},
			async doRevoke(id){
				const { data } = await revoke(id);
				if(data.code == 200){
					uni.showToast({
						title: '撤销成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 500)
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.list_user {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	.list_user .left {
		position: relative;
		width: 10%;
		font-size: 1em !important;
	}
	.list_left_icon {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.list_user .right {
		width: 85%;
	}
	.list_user .right .line1 {
		display: flex;
		justify-content: space-between;
		color: #999;
	}
	.list_user .right .line2 {
		color: #666;
	}
	.list_user .right .line3 {
		padding: 10rpx;
		background-color: #d4d4d4;
		border-radius: 0 10rpx 10rpx 10rpx;
		line-height: 2;
		color: #666;
		font-size: 25rpx;
	}
	.list_line {
		width: 10%;
		text-align: center;
	}
	.list_line .line {
		display: inline-block;
		vertical-align: middle;
		height: 60rpx;
		border-left: 6rpx solid #aaa;
		border-radius: 5rpx;
	}
	.list_line .lineDash {
		display: inline-block;
		vertical-align: middle;
		height: 60rpx;
		border-left: 6rpx dashed #aaa;
		border-radius: 5rpx;
	}
	.per-list {
		margin-right: 50rpx;
	}
	
	.pers-pic {
		height: 65rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 85rpx;
		width: 26rpx;
	}
	.submit-block_item {
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	.submit-block_item:nth-child(2) {
		background-color: #9a9d9f;
	}
	.per-list-csr {
		display: flex;
		justify-content: left;
	}
	.per-list-csr .csr-item {
		text-align: center;
		display: flex;
	}
	.csr-item .csr-icon  {
		display: flex;
		margin: 0 10rpx;
	}
	.qz {
	  position: absolute;
	  right: 80rpx;
	  top: 40rpx;
	}
	.qz image {
	  width: 150rpx;
	  height: 150rpx;
	}
	.list_left_icon {
		background-color: #fff;
		border-radius: 50%;
	}
	.list_left_icon icon{
		vertical-align: bottom;
		display: block;
	}
	.submit-button .submit-block {
		background-color: #fff;
	}
</style>